<div id="root">
    <daohanglan left-arrow @click-left="clickLeftFn" @click-right="clickRightFn" title="用户创建"></daohanglan>
    <h1>表单组件</h1>
    <biaodan @biaodantijiao="canshu"></biaodan>
    <h1>按钮组件</h1>
    <gg-button type="primary" content="主要按钮"></gg-button>
    <gg-button type="info" content="信息按钮"></gg-button>
    <gg-button type="default" content="默认按钮"></gg-button>
    <gg-button type="warning" content="警告按钮"></gg-button>
    <gg-button type="danger" content="危险按钮"></gg-button>


    <h1>loading组件</h1>
    <gg-loading :state="loadingState"></gg-loading>
    <button @click="loadingState = true">显示loading</button>
    <button @click="loadingState = false">隐藏loading</button>


    <h1>loading2</h1>
    <!-- <gg-loading2 :state="loading2State" @close="" ()=> loading2State = false</gg-loading2>></gg-loading2> -->
    <gg-loading2 :state.sync="loading2State"></gg-loading2>
    <button @click="loading2State = true">显示loading</button>



    <h1>dialog</h1>
    <gg-dialog :visible.sync="dialogState" title="用户创建" content="<input type='text'/>"></gg-dialog>
    <button @click="dialogState = true">显示对话框</button>


    <h1>分页组件page</h1>
    <gg-page :total="11" :page-size="2" @click-page="changePageFn"></gg-page>

    <gg-table :columns="usersColumns"></gg-table>
    <br/>
    <br/>
    <br/>

    <gg-table :columns="goodsColumns"></gg-table>





</div>




<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="./qfui.css">
<script src="./qfui.js"></script>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
            loadingState: false,
            loading2State: false,
            dialogState: false,
            usersColumns: [{
                title: "编号",
                key: "id"
            }, {
                title: "姓名",
                key: "uname"
            }, ],
            goodsColumns: [{
                title: "编号",
                key: "id"
            }, {
                title: "商品名称",
                key: "title"
            }, {
                title: "价格",
                key: "price"
            }, ],

        },
        methods: {
            clickLeftFn() {
                alert('clickLeftFn')
            },
            clickRightFn() {
                alert('clickRightFn')
            },
            canshu(yonghushuju) {

                console.log('表单数据', yonghushuju);
                alert('用户创建请求接口')
            }
        }
    })
</script>